<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ws client</title>
</head>
<body>
<p style="border:1px solid cadetblue;width: 600px;height: 400px;" id="talkMsg"></p>

<input  id="message"  style="font-size: 20px;height:100px; "/>
<button id="sendButn"  onclick="sendMsg()" style="font-size: 20px;height:100px; ">发送</button>
</body>
<script>
    let ws = new WebSocket('ws://localhost:8080/myWs1');
    //打开websocket来连接后立刻发送一条消息:
    ws.onopen = function(){
        ws.send("hello");
    };

    // 收到消息后打印：
    ws.onmessage = function(message){
        console.log(message.data);
        let talkMsgP = document.getElementById("talkMsg");
        talkMsg.innerHTML = message.data;

    }
    // 发送消息
    function sendMsg(e){
        console.log(e);
        let msgInput = document.getElementById("message");
        ws.send(msgInput.value);
        msgInput.value="";
    }
</script>
</html>
